<template>
  <section class="todoapp">
    <todoobu @congder="tobu1" />
    <todozhongbu :arr="showArr" @shanchu="dotoAddLin" />
    <todoweibu
      v-if="list.length > 0"
      :arr="list"
      @todoAaaK="qiehuan"
      @clear="todoAee"
    />
  </section>
</template>

<script>
import "./css/index.css";
import "./css/base.css";

import todoobu from "./comproncing/todoobu.vue";
import todozhongbu from "./comproncing/todozhongbu.vue";
import todoweibu from "./comproncing/todoweibu.vue";
export default {
  data() {
    return {
      getSel: "all",
      list: JSON.parse(localStorage.getItem('todolist')) || []
    };
  },
  methods: {
    tobu1(name) {
      let obj = {
        id: Math.ceil(Math.random() * 1000),
        name,
        isDone: "false",
      };
      this.list.push(obj);
    },
    dotoAddLin(i) {
      if (window.confirm("确认删除吗？")) {
        this.list.splice(i, 1);
      }
    },
    qiehuan(inko) {
      //   console.log(inko);
      this.getSel = inko;
    },
    todoAee() {
      if (window.confirm("确认全部删除吗？")) {
        this.list = this.list.filter((obj) => obj.isDone === false);
      }
    },
  },
  watch: {
      list:{
          deep:true,
          handler(){
localStorage.setItem('todolist',JSON.stringify(this.list))
          }
      }
  },
  computed: {
    showArr() {
      if (this.getSel === "yes") {
        return this.list.filter((item) => item.isDone === true);
      } else if (this.getSel === "no") {
        return this.list.filter((item) => item.isDone === false);
      } else {
        return this.list;
      }
    },
  },
  components: {
    todoobu,
    todozhongbu,
    todoweibu,
  },
};
</script>

<style>
</style>